<template>
  <div class="debuger">
    <div class="post">
      <span class="le">POST</span>
      <span class="ri">{{ debuggingDataJson.api || "/aicos-ai/ai/run" }} </span>
      <el-button class="btnSend" :disabled="disabled" type="primary" @click="send" size="small">测试</el-button>
    </div>
    <div class="parms">
      <div class="tit">请求参数</div>
      <div class="txt">JSON(application/json)</div>
      <vue-json-editor v-model="debuggingDataJson.RequestBody" :showBtns="false" :mode="'text'" lang="zh"
        @json-change="onJsonChange" @json-save="onJsonSave" />
    </div>
    <div v-if="flag" class="parms">
      <div class="tit">响应内容</div>
      <vue-json-editor v-model="Response" :showBtns="false" :mode="'text'" lang="zh" @json-change="onJsonChange"
        @json-save="onJsonSave" />
    </div>
  </div>
</template>

<script>
import { startAnalysis } from "@/api/configure/intelligentClassification";
const vueJsonEditor = () => import('vue-json-editor');
export default {
  name: "aiClassiDebugger",
  props: {
    debuggingDataJson: {
      type: Object,
    },
  },
  components: {
    vueJsonEditor,
  },
  data() {
    return {
      flag: false,
    };
  },
  computed: {},
  watch: {

  },
  mounted() {
    const scope = this;
    setTimeout(() => {
      scope.debugDataJosn = scope.debuggingDataJson;
    }, 500);
  },
  methods: {
    onJsonChange(value) {
      console.log("value:", value);
    },
    onJsonSave(value) {
      console.log("value:", value);
    },
    send() {
      startAnalysis({ ...this.debuggingDataJson['RequestBody'] }).then((res) => {
        console.log(res)
        if (res.data.success) {
          this.Response = res
          this.flag = true
          this.$message({
            message: '分析成功',
            type: 'success'
          });
        }
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.debuger {
  /deep/ .jsoneditor-poweredBy {
    display: none;
  }

  /deep/ .jsoneditor-outer {
    height: 250px;
  }

  margin-bottom: 50px;

  /deep/ div.jsoneditor {
    min-height: 250px;
  }

  .post {
    border-color: #49cc90;
    background: rgba(73, 204, 144, 0.1);
    margin-right: 20px;

    .le {
      display: inline-block;
      background: #49cc90;
      font-size: 14px;
      font-weight: 700;
      min-width: 80px;
      padding: 6px 15px;
      text-align: center;
      border-radius: 3px;
      // text-shadow: 0 1px 0 rgb(0 0 0 / 10%);
      font-family: Titillium Web, sans-serif;
      color: #fff;
    }

    .ri {
      display: inline-block;
      margin-left: 20px;
    }

    .btnSend {
      float: right;
    }
  }

  .parms {
    .tit {
      margin-top: 20px;
      margin-bottom: 5px;
      font-size: 16px;
      font-weight: 600;
      height: 30px;
      line-height: 30px;
      border-left: 4px solid #00ab6d;
      text-indent: 8px;
    }

    .txt {
      display: block;
      color: #444;
      font-size: 14px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-weight: 400;
      margin: 8px 0;
    }
  }

  .audio {
    margin-top: 20px;
  }

  .analysis {
    margin-top: 20px;
  }

  .analysisReslft {
    margin: 20px 0;

    .tit {
      margin-bottom: 10px;
    }
  }
}

/deep/ .el-upload-list__item-name [class^="el-icon"] {
  display: none;
}
</style>
